<template>
	<view class="edit">
		<u-navbar
			placeholder
			bgColor="#F8F8F8"
			:autoBack="true"
		>
			<view class="navbar" slot="left">
				<u-icon name="arrow-left" size="15"></u-icon>
			</view>
			<view class="navbar" slot="right">
				<view class="" v-show="formids.length" @click="selectForm" style="margin-right: 10rpx;font-size: 26rpx;background-color: #73d13d;padding: 0 10rpx;border-radius: 10rpx;color: #fff;margin-left: 20rpx;">
					<text>已选表单：</text>
					<text>{{formids.length}}</text>
				</view>
				<view class="navbar__text" @click="goDraftPage" v-if="type == 'add'">草稿箱</view>
				<view class="navbar__btn" :class="saveDisabled ? 'navbar__btn--active-save' : ''" style="margin-right: 10rpx;" @click="community.custom_save" v-if="type == 'add' || type == 'edit-as-draft'">暂存草稿</view>
				<view class="navbar__btn" :class="submitDisabled ? 'navbar__btn--active' : ''" @click="community.custom_submit">发布</view>
			</view>
		</u-navbar>
		<view class="edit__title"
		>
			<input :class="['edit__title--input',titleInputFocus ? 'title-input-focus':'']" 
			type="text" 
			placeholder="标题（必填）" 
			placeholder-style="font-size: 35rpx;color: #aaa;"
			v-model="title"
			@focus="titleFocus"
			@blur="titleInputFocus = false">
		</view>
		<view class="edit__content">
			<view
				class="edit__content--input"
				ref="edit__content--input" 
				contenteditable="true" 
				spellcheck="false"
				:class="{'show-placeholder' : showPlaceholder}" 
				:style="{height: contentHeight + 'px'}"
				:placeholder="placeholder"
				:id="id"
				:content="content"
				:atUsers="atUsers"
				:atFactory="atFactory"
				:static_img="static_img"
				:currentColor="currentColor"
				:keyboardVisible="keyboardVisible"
				:emoji="emoji"
				:jxp="emoji_jxp"
				:images="images"
				:videoSrc="videoSrc"
				:videoImg="videoImg"
				:link="link"
				:subject="subject"
				:change:id="community.idChange"
				:change:content="community.contentChange"
				:change:atUsers="community.atUsersChange"
				:change:atFactory="community.atFactoryChange"
				:change:static_img="community.static_imgChange"
				:change:currentColor="community.colorChange"
				:change:keyboardVisible="community.custom_keyboardVisible"
				:change:emoji="community.custom_emoji"
				:change:jxp="community.custom_jxp" 
				:change:images="community.imagesChange"
				:change:videoSrc="community.videoSrcChange"
				:change:videoImg="community.videoImgChange"
				:change:link="community.linkChange"
				:change:subject="community.subjectChange"
				@keydown="community.custom_keydown"
				@input="community.custom_input"
				@blur="community.custom_blur"
				@click="community.custom_click">
			</view>
		</view>
		
		<view class="container">
			<view class="edit__tag" @click="clickTagList">
				<scroll-view class="edit__tag-scroll" :scroll-x="true" :show-scrollbar="false">
					<view class="edit__tag-scroll--item category" v-show="category">
						<text style="color: #aaa;font-size: 25rpx;">板块：</text>
						<text>{{category}}</text>
					</view>
					<view class="edit__tag-scroll--item" v-for="(item,index) in tags" :key="index">
						<text>{{item}}</text>
					</view>
					<view class="" v-show="!tags.length" style="color: #aaa;font-size: 25rpx;line-height: 50px;display: inline-block;float: right;">选择板块及话题</view>
				</scroll-view>
				<view class="edit__tag--icon">
					<u-icon name="arrow-right" color="#aaa" size="18"></u-icon>
				</view>
			</view>
			
			<view class="edit__set">
				<view class="edit__set--left">
					<view class="edit__set--left-item" @click="emojiClick">
						<image src="@/static/theme/default/community/emoji.png" mode=""
							v-show="emoji_active == -1"></image>
						<image src="@/static/theme/default/community/keyboard.png" mode=""
							v-show="emoji_active != -1"></image>
					</view>
					<view class="edit__set--left-item" @click="imgClick">
						<image src="@/static/theme/default/community/img.png" mode=""></image>
					</view>
					<view class="edit__set--left-item" id="at" @click="clickAt">
						<image src="@/static/theme/default/community/at.png" mode=""></image>
					</view>
					<view class="edit__set--left-item" @click="fontClick">
						<image src="@/static/theme/default/community/font.png" mode=""
							v-show="!showFont"></image>
						<image src="@/static/theme/default/community/font-sel.png" mode=""
							v-show="showFont"></image>
					</view>
					<!-- <view class="edit__set--left-item" @click="videoClick">
						<image src="@/static/theme/default/community/video.png" mode=""></image>
					</view> -->
					<view class="edit__set--left-item" @click="moreClick">
						<image src="@/static/theme/default/community/more.png" mode="" v-show="!showMore"></image>
						<image src="@/static/theme/default/community/more-sel.png" mode=""  v-show="showMore"></image>
					</view>
				</view>
				<view class="edit__set--right">
					<view class="edit__set--right-box" @click="clickSetIcon">
						<image src="@/static/theme/default/community/config.png" mode="" v-if="!showSet"></image>
						<image src="@/static/theme/default/community/config-sel.png" mode="" v-else></image>
					</view>
				</view>
			</view>
			
			<view class="emoji__head" v-show="emoji_active != -1">
				<view class="emoji__head--item" :class="emoji_active == 0 ? 'emoji-active' : ''"
					@click="changeEmoji(0)">
					<image src="@/static/theme/default/home/comment/biaoqing.png" mode=""></image>
				</view>
				<view class="emoji__head--item" :class="emoji_active == 1 ? 'emoji-active' : ''"
					@click="changeEmoji(1)">
					<image src="@/static/theme/default/home/comment/like.png" mode=""></image>
				</view>
			</view>
			<swiper class="emoji-swiper" indicator-dots="true" duration="150" v-show="emoji_active == 0">
				<swiper-item v-for="(page, pid) in emojiList" :key="pid">
					<view hover-class="clickable" v-for="(em, eid) in page" :key="eid" @click="addEmoji(em)">
						<image :src="'/static/img/emoji/' + em.url" :lazy-load="true" />
					</view>
				</swiper-item>
			</swiper>
			<swiper class="jxp-swiper" indicator-dots="true" duration="150" v-show="emoji_active == 1">
				<swiper-item v-for="(item,index) in jxpList" :key="index">
					<view class="jxp-swiper__item" v-for="v in item" :key="v.url" @click="addJxp(v)">
						<image :src="'/static/img/jxp/png/' + v.url + '.png'" :lazy-load="true" />
						<text>{{v.text}}</text>
					</view>
					<view class="jxp-swiper__item" v-for="n in (10 - (jxpList.length) % 10)" :key="n"></view>
				</swiper-item>
			</swiper>
			
			<view class="font" v-show="showFont">
				<view class="font__title">文字颜色</view>
				<view class="font__list">
					<view class="font__list--item" v-for="item in colors" :key="item"
						:style="{backgroundColor: item,borderColor: currentColor == item ? item : ''}"
						@click="selectColor(item)">
					</view>
				</view>
			</view>
			
			<view class="more" v-show="showMore">
				<view class="more-list" @click="morePopVisible = true">
					<view class="more-list__icon">
						<image src="@/static/theme/default/community/lianjie.png" mode=""></image>
					</view>
					<view class="more-list__text">链接</view>
				</view>
				<view class="more-list" @click="selectSubject">
					<view class="more-list__icon">
						<image src="@/static/theme/default/community/lianjie.png" mode=""></image>
					</view>
					<view class="more-list__text">帖子</view>
				</view>
				<view class="more-list" @click="selectForm">
					<view class="more-list__icon">
						<image src="@/static/theme/default/community/form.png" mode=""></image>
					</view>
					<view class="more-list__text">表单</view>
				</view>
			</view>
			
			<view class="set" v-show="showSet">
				<u-gap height="5" bgColor="#eee"></u-gap>
				<view class="set__list" @click="clickGather">
					<view class="set__list--left">加入合集</view>
					<view class="set__list--right"  style="display: flex;align-items: center;">
						<view class="" style="width: 300rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #aaa;font-size: 30rpx;text-align: right;">{{selectedSeries.SeriesTitle}}</view>
						<u-icon name="arrow-right" color="#aaa" size="18"></u-icon>
					</view>
				</view>
				<view class="set__list" @click="community.getImgs">
					<view class="set__list--left">封面</view>
					<view class="set__list--right" style="display: flex;align-items: center;">
						<view class="" style="color: #aaa;" v-if="!selectedImgs.length">请选择封面</view>
						<view class="" style="color: #aaa;" v-else>已选择</view>
						<u-icon name="arrow-right" color="#aaa" size="18"></u-icon>
					</view> 
				</view>
				<view class="set__list" @click="choosePermission">
					<view class="set__list--left">谁可以看</view>
					<view class="set__list--right" style="display: flex;align-items: center;">
						<view class="" style="width: 400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #aaa;font-size: 30rpx;text-align: right;">{{permission.des}}</view>
						<u-icon name="arrow-right" color="#aaa" size="18"></u-icon>
					</view>
				</view>
				<view class="set__list" v-if="isMaster == '1'">
					<view class="set__list--left">置顶</view>
					<view class="set__list--right">
						<u-switch v-model="istop"></u-switch>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup round="20" :show="atCommonPop" @close="atCommonPop = false" @open="atCommonPop = true">
			<view class="at-common-pop">
				<view class="at-common-pop__head">
					<view class="at-common-pop__head--left" @click="atCommonPop = false">
						<u-icon name="close" color="#aaa" size="18"></u-icon>
					</view>
					<view class="at-common-pop__head--center">选择常用联系人</view>
					<view class="at-common-pop__head--right">
						<view class="at-common-pop__head--right-btn" @click="atCommonPop = false,atPopVisible = true">其他</view>
					</view>
				</view>
				<view class="at-common-pop__body">
					<view class="at-list" v-for="item in atCommonUsers" :key="item.id" @click="item.check = !item.check">
						<view class="at-list__checkbox">
							<c-check-box :check="item.check"></c-check-box>
						</view>
						<view class="at-list__avator">
							<avator :name="item.AtUserName" :avator="item.avator"></avator>
						</view>
						<view class="at-list__name">{{item.AtUserName}}</view>
					</view>
				</view>
				<view class="at-common-pop__bottom">
					<u-button type="primary" text="确定" color="#2979ff" @click="confirmAt"></u-button>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="atPopVisible" @close="atPopVisible = false" @open="atPopVisible = true">
			<view class="at-pop">
				<view class="at-pop__btn" @click="selectAt(0)">@ 常用</view>
				<view class="at-pop__btn" @click="selectAt(1)">@ 个人</view>
				<view class="at-pop__btn" @click="selectAt(2)">@ 全体</view>
			</view>
		</u-popup>
		
		<u-popup :round="10" :show="videoVisible" @close="videoVisible = false" @open="videoVisible = true">
			<view class="video">
				<view class="video__head">
					<view class="video__head--left" @click="videoVisible = false">
						<u-icon name="close" color="#aaa" size="18"></u-icon>
					</view>
					<view class="video__head--center">添加视频</view>
					<view class="video__head--right" @click="confirmVideo">确定</view>
				</view>
				<view class="video__body">
					<input type="text" placeholder="请输入哔哩哔哩BV号" placeholder-style="color: #aaa;font-size: 27rpx;" v-model="videoSrc">
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="morePopVisible" @close="morePopVisible = false" @open="morePopVisible = true">
			<view class="more-pop">
				<view class="more-pop__head">
					<u-icon name="close" size="25" @click="morePopVisible = false"></u-icon>
					<view class="more-pop__head--center">添加链接</view>
					<view class="more-pop__head--right" @click="confirmUrl">确定</view>
				</view>
				<view class="more-pop__body">
					<view class="more-pop__body--input">
						<u--input
						    placeholder="请输入链接文本"
						    border="surround"
						    v-model="urlText"
							clearable
						  ></u--input>
					</view>
					<view class="more-pop__body--input" style="margin-top: 20rpx;">
						<u--input
						    placeholder="请输入链接URL,以http(s)://开头"
						    border="surround"
						    v-model="urlSrc"
							clearable
						  ></u--input>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :round="10" :show="gatherVisible" @close="gatherVisible = false" @open="gatherVisible = true">
			<view class="gather">
				<view class="gather__head">
					<view class="gather__head--left">选择合集</view>
					<view class="gather__head--right" @click="addGather">创建合集</view>
				</view>
				<u-radio-group v-model="serisId" placement="column">
					<label class="gather__unselect" @click="selectSeries('-1')">
						<view class="">不加入合集</view>
						<view class="">
							<u-radio shape="circle" name="-1" @change="selectSeries('-1')"></u-radio>
						</view>
					</label>
					<label class="gather-list" v-for="item in subjectSeries" :key="item.Id"  @click="selectSeries(item.Id)">
						<view class="gather-list__left">
							<view class="gather-list__left--img">
								<image :src="item.img" mode=""></image>
							</view>
							<view class="gather-list__left--title">{{item.SeriesTitle}}</view>
						</view>
						<view class="gather-list__right">
							<u-radio shape="circle" :name="item.Id" @change="selectSeries(item.Id)"></u-radio>
						</view>
					</label>
				</u-radio-group>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import _data from '@/common/_data.js'
	import _custom from '@/common/_custom.js'
	import { uploadImages,is_iOS,getRandom,imageStrigify,formatImg,imageArrayToString,imageStringToArray,utf16toEntities,entitiestoUtf16 } from '@/common/custom_util.js';
	import emoj_data from '@/static/js/message/emoji_data.js';
	import jxp from '@/static/js/jxp.js';
	import defaultSeiresImg from '@/static/theme/default/community/series.png'
	import Avator from '@/components/custom/avator/avator.vue'
	import CCheckBox from '@/components/custom/c-check-box/c-check-box.vue';
	
	export default {
		components: {
			Avator,CCheckBox
		},
		data() {
			return {
				static_avator: _data.data('static_url'),
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				static_img: _data.data('static_img'),
				isMaster: _data.localData('isMaster'),
				titleInputFocus: false,//标题输入是否聚焦
				placeholder: '请尽情发挥吧...',
				title: '',//帖子标题
				value: '',//输入框的内容
				content: '',//待修改的内容
				id: '',//输入框id
				colors: ['#1E1E1E', '#AAE04E', '#69DFBC', '#F6E45C', '#F5C348', '#E56B53', '#DF69A5'],//颜色列表
				currentColor: '#1E1E1E',//当前字体颜色
				contentHeight: 800,//输入框高度
				emoji: {},////添加的默认表情
				emoji_jxp: {},//添加的金小鹏表情
				emojiList: emoj_data.emoji_list,
				jxpList: jxp.jxp_data,
				showFont: false,//控制字体窗口显示
				showMore: false,//控制更多窗口显示
				emoji_active: -1,//控制表情窗口显示
				showSet: false,//控制设置显示
				images: [],//上传后返回的图片
				keyboardVisible: false,//控制键盘显示
				atUsers: [],//艾特的用户
				atFactory: [],//艾特的水厂
				category: '日常',//分类
				tags: [],//标签
				istop: false,//是否置顶
				permission: {//当前权限
					name: '公开',
					check: true,
					des: '所有人可见',
					level: 'PUBLIC',
					code: 1
				},
				gatherVisible: false,//控制合集窗口显示
				videoVisible: false,//视频弹窗控制
				morePopVisible: false,//链接弹窗控制
				atPopVisible: false,//艾特弹窗控制
				urlText: '',//链接文本
				urlSrc: '',//链接地址
				link: {},//添加dom时的链接
				videoSrc: '',//视频地址
				videoImg: '',//视频封面
				statusBarHeight: '',//状态栏高度
				windowHeight: '',//窗口高度
				selectedImgs: [],//文章封面
				subjectSeriesSorting: 'desc',//合集排序,asc:最早，desc:最新
				subjectSeries: [],//合集列表
				serisId: '-1',//选中的合集id
				selectedSeries: {},//选中的合集
				data: {},//输入时的数据
				listener: null,
				isModule: false,//作为模板
				type: 'add',//add：新增，edit：修改，add-as-draft：新增为草稿，edit-as-draft：修改存为草稿，add-as-module：作为模板新增
				subjectid: '',//帖子id
				isSubmit: false,//控制提交
				code: '',//安全模块传递的参数
				subject: {},//添加的帖子
				atCommonPop: false,//艾特常用人员弹窗控制
				atCommonUsers: [],//常用人员数据
				formids: [],//已选择表单
			}
		},
		onLoad(options) {
			let that = this;
			this.subjectid = options.id;
			this.type = options.type;
			switch(this.type) {
				case 'edit':
				case 'add-as-module':
				case 'edit-as-draft':
					this.getSubjectInfoById();
					break;
				case 'daily'://每日安全相关转发
					this.code = options.code;
					let images = JSON.parse(options.images);
					let temp = [];
					images.forEach((item,index) => {
						let p = new Promise(resolve => {
							uni.getImageInfo({
								src: item,
								success(res) {
									resolve({
										...res,
										img: item
									});
								}
							})
						})
						temp.push(p)
					})
					this.title = options.title;
					Promise.all(temp).then(res => {
						this.images = res.map(result => {
							return {
								width: result.width,
								height: result.height,
								img: result.img,
							}
						})
					})
					break;
			}
			this.id = getRandom();
			uni.$on('select-list-'+this.id,res => {
				this.atUsers = res;
				_data.localData('select-list-'+this.id,[]);
				setTimeout(() => {
					this.atUsers = [];
				},300)
			})
			uni.$on('select-factory-'+this.id,res => {
				this.atFactory = res;
				setTimeout(() => {
					this.atFactory = [];
				},300)
			})
			this.getTopicCommonAtUserList();
		},
		onShow() {
			this.setContentHeight();
			if(this.gatherVisible) {
				this.getMySubjectSeriesList();
			}
		},
		onReady() {
			let that = this;
			this.setContentHeight();
			this.listener = function(res) {
				if(res.height) {
					setTimeout(() => {
						that.setContentHeight(res.height);
					},400)
					return
				}
				that.setContentHeight(res.height);
			}
			//监听键盘高度变化
			uni.onKeyboardHeightChange(this.listener);
		},
		onUnload() {
			uni.$off('select-list-'+this.id);
			uni.$off('select-factory-'+this.id);
			_data.localData('select-list-'+this.id,[]);
			uni.offKeyboardHeightChange(this.listener)
		},
		computed: {
			showPlaceholder() {
				return (this.value.length == 0 || this.value == '<br>') && this.placeholder
			},
			submitDisabled() {
				return !this.showPlaceholder && this.title.length
			},
			saveDisabled() {
				return !this.showPlaceholder || this.title.length
			}
		},
		methods: {
			/**
			 * 获取我的合集列表
			 */
			getMySubjectSeriesList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getMySubjectSeriesList',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
						keyword: '',
						sorting: this.subjectSeriesSorting
					},
					success(res) {
						res.forEach(item => {
							item.img = item.SeriesImage ? that.static_img + '/' + item.SeriesImage : defaultSeiresImg;
						})
						that.subjectSeries = res;
					},
					fail() {
						uni.showToast({
							title: '获取合集失败',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 添加社区帖子
			 */
			addSubject(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addSubject',
						code: 1,
						apiparam,
						success(res) {
							let title = that.isdraft ? '保存成功' : '发布成功'
							uni.showToast({
								title,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack()
							},400)
							resolve(res)
						},
						fail() {
							let title = that.isdraft ? '保存失败' : '发布失败'
							uni.showToast({
								title,
								icon: 'none'
							})
							that.isSubmit = true;
						}
					})
				})
			},
			/**
			 * 修改社区帖子
			 */
			updateSubjectById(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'updateSubjectById',
						code: 2,
						apiparam,
						success(res) {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							})
							setTimeout(() => {
								if(that.type == 'edit') {
									uni.$emit('edit-subject')
								}
								uni.navigateBack()
							},400)
							resolve(res)
						},
						fail() {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							})
							that.isSubmit = true;
						}
					})
				})
			},
			/**
			 * 根据Id获取帖子详情
			 */
			getSubjectInfoById() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSubjectInfoById',
					apiparam: {
						id: this.subjectid,
						obsusername: this.obsusername,
						obspxid: this.pxid,
					},
					success(res) {
						if(res.length) {
							that.setData(res[0]);
						}
						
					},
				})
			},
			/**
			 * 判断主题是否已创建，没有创建则创建，返回主题Id
			 */
			getTopicExistAndCreate(v) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'getTopicExistAndCreate',
						apiparam: {
							topicrouter: '/pages/community/subject-view',
							businessid: v,
							owner: this.obsusername,
							ownerpxid: this.pxid
						},
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 创建主题艾特相关人数据
			 */
			addTopicAt(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addTopicAt',
						code: 13,
						apiparam: apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 添加转发的帖子与原模块的关联信息
			 */
			addSubjectForward(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addSubjectForward',
						code: 3,
						apiparam: apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 获取艾特常用人员
			 */
			getTopicCommonAtUserList() {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'getTopicCommonAtUserList',
						apiparam: {
							obsusername: this.obsusername,
							obspxid: this.pxid
						},
						success(res) {
							res.forEach(item => {
								item.avator = that.static_avator + "/static/photo/user/" + item.AtUserPxid + "/70.jpg";
								item.check = false;
							})
							that.atCommonUsers = res;
						}
					})
				})
			},
			/**
			 * 赋值
			 * @param {Object} data
			 */
			setData(data) {
				let that = this;
				that.title = entitiestoUtf16(data.SubjectTitle);
				if(data.SubjectContent) {
					let content = data.SubjectContent.replace(/%22/g,'"');
					that.content = this.replaceEmoji(content)
				} else {
					that.content = '';
				}
				that.category = data.BlockName ? data.BlockName : this.category;
				that.tags = data.TagNames ? data.TagNames.split('|') : [];
				that.serisId = data.SeriesId;
				that.selectedSeries.SeriesTitle = data.SeriesTitle;
				that.selectedImgs = imageStringToArray(data.CoverImages,['src','width','height']);
				that.selectedImgs.forEach(item => {
					item.src = formatImg(item.src,false);
				})
				switch(data.LevelCode) {
					case '1':
						that.permission = {
							name: '公开',
							check: true,
							des: '所有人可见',
							level: 'PUBLIC',
							code: 1
						}
						break;
					case '2':
						that.permission = {
							name: '部分',
							des: '仅本组织可见（' + _data.localData('obsname') + '）',
							check: true,
							level: _data.localData('obscode'),
							code: 2
						}
						break;
					case '3':
						that.permission = {
							name: '私密',
							des: '仅自己可见',
							check: true,
							level: _data.localData('userid'),
							code: 3
						}
						break;
				}
				that.istop = data.IsTop == '0' ? false : true;
				if(data.FormIds.length) this.formids = data.FormIds.split(",");
			},
			/**
			 * 获取dom信息
			 * @param {Object} id
			 */
			getDomInfo(id) { 
				return new Promise(resolve => {
					const query = uni.createSelectorQuery().in(this);
					query.select(id).boundingClientRect(data => {
					  resolve(data);
					}).exec();
				})
			},
			/**
			 * 设置编辑器高度
			 */
			setContentHeight(v) {
				let that = this;
				if(v) {
					that.$nextTick(() => {
						that.contentHeight = that.windowHeight - that.statusBarHeight - 44 - 60 - 100 - v - 10;
					})
					return
				}
				if(!that.statusBarHeight) {
					uni.getSystemInfo({
						success(res) {
							that.statusBarHeight = res.statusBarHeight;
							that.windowHeight = res.windowHeight;
							if(v) {
								that.$nextTick(() => {
									that.contentHeight = that.windowHeight - that.statusBarHeight - 44 - 60 - 100 - v - 10;
								})
								return
							}
							that.$nextTick(() => {
								setTimeout(() => {
									that.getDomInfo('.edit__tag').then(res => {
										that.contentHeight = res.top - that.statusBarHeight - 44 - 60 - 10;
									});
								},600);
							})
						}
					})
					return
				}
				that.$nextTick(() => {
					setTimeout(() => {
						that.getDomInfo('.edit__tag').then(res => {
							that.contentHeight = res.top - that.statusBarHeight - 44 - 60 - 10;
						});
					},600);
				})
			},
			/**
			 * 发布回调
			 * @param {Object} v
			 */
			submit(v) {
				if(this.isSubmit) return
				if(!this.title.trim()) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
					return
				}
				if(this.showPlaceholder) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				this.isSubmit = true;
				let {subjectcontent,covercontent,subjectimages,coverimages,defaultimage,formids} = this.formatContent(v);
				
				console.log(v);
				switch(this.type) {
					case 'add'://新增
					case 'add-as-module':
					case 'daily':
						this.addSubject({
							createuser: this.obsusername,
							createpxid: this.pxid,
							seriesid: this.serisId == '-1' ? '' : this.serisId,//合集id
							subjecttitle: utf16toEntities(this.title),//标题
							subjectcontent,//文章正文
							subjectimages,//正文中的图片汇总
							defaultimage,//封面候选图
							covercontent,//文章正文前40个字
							coverimages,//封面图片
							blockname: this.category,//分类名称
							tagnames: this.tags.join('|'),//标签
							isdraft: '0',
							showlevel: this.permission.level,//权限
							levelcode: this.permission.code,//权限code
							istop: this.istop ? '1' : '0',//置顶
							formids
						}).then(res => {
							if(res.length) {
								let businessid = res[0].SubjectId;
								if(this.type == 'daily') {
									this.addSubjectForward({
										forwardcode: this.code,
										subjectid: businessid
									})
								}
								if(!v.users.length) return
								this.getTopicExistAndCreate(businessid).then(r => {
									let topicId = r[0].TopicId;
									let params = [];
									let timestamp = (new Date()).valueOf();
									v.users.forEach(item => {
										params.push({
											topicid: topicId,
											replyid: '-1',
											batchid: timestamp,
											createuser: this.obsusername,
											createpxid: this.pxid,
											atusername: item.pname,
											atuserpxid: item.pxid,
										})
									})
									v.factorys.forEach(item => {
										params.push({
											topicid: topicId,
											replyid: '-1',
											batchid: timestamp,
											createuser: this.obsusername,
											createpxid: this.pxid,
											atobscode: item.OBSCODE,
										})
									})
									this.addTopicAt(params)
								})
							}
						})
						break;
					case 'edit':
					case 'edit-as-draft':
						this.updateSubjectById({
							createuser: this.obsusername,
							createpxid: this.pxid,
							subjectid: this.subjectid,
							subjecttitle: utf16toEntities(this.title),//标题
							subjectcontent,//文章正文
							subjectimages,//正文中的图片汇总
							defaultimage,//封面候选图
							covercontent,//文章正文前40个字
							coverimages,//封面图片
							blockname: this.category,//分类名称
							tagnames: this.tags.join('|'),//标签
							isdraft: '0',
							showlevel: this.permission.level,//权限
							levelcode: this.permission.code,//权限code
							istop: this.istop ? '1' : '0',//置顶
							seriesid: this.serisId == '-1' ? '' :this.serisId,//合集id
							formids
						}).then(res => {
							if(!v.users.length) return
							this.getTopicExistAndCreate(this.subjectid).then(r => {
								let topicId = r[0].TopicId;
								let params = [];
								let timestamp = (new Date()).valueOf();
								v.users.forEach(item => {
									params.push({
										topicid: topicId,
										replyid: '-1',
										batchid: timestamp,
										createuser: this.obsusername,
										createpxid: this.pxid,
										atusername: item.pname,
										atuserpxid: item.pxid,
									})
								})
								v.factorys.forEach(item => {
									params.push({
										topicid: topicId,
										replyid: '-1',
										batchid: timestamp,
										createuser: this.obsusername,
										createpxid: this.pxid,
										atobscode: item.OBSCODE,
									})
								})
								this.addTopicAt(params)
							})
						})
						break;
				}
			},
			/**
			 * 保存草稿
			 * @param {Object} v
			 */
			save(v) {
				if(this.isSubmit) return
				if(!this.title.trim() && this.showPlaceholder) {
					return
				}
				this.isSubmit = true;
				let {subjectcontent,covercontent,subjectimages,coverimages,defaultimage,formids} = this.formatContent(v);
				
				this.isdraft = true;
				switch(this.type) {
					case 'add'://新增
						this.addSubject({
							createuser: this.obsusername,
							createpxid: this.pxid,
							seriesid: this.serisId == '-1' ? '' : this.serisId,//合集id
							subjecttitle: utf16toEntities(this.title),//标题
							subjectcontent,//文章正文
							subjectimages,//正文中的图片汇总
							defaultimage,//封面候选图
							covercontent,//文章正文前40个字
							coverimages,//封面图片
							blockname: this.category,//分类名称
							tagnames: this.tags.join('|'),//标签
							isdraft: '1',//是否存草稿 0：直接发布，1：存草稿箱
							showlevel: this.permission.level,//权限
							levelcode: this.permission.code,//权限code
							istop: this.istop ? '1' : '0',//置顶
							formids
						})
						break;
					case 'edit-as-draft':
						this.updateSubjectById({
							createuser: this.obsusername,
							createpxid: this.pxid,
							subjectid: this.subjectid,
							subjecttitle: utf16toEntities(this.title),//标题
							subjectcontent,//文章正文
							subjectimages,//正文中的图片汇总
							defaultimage,//封面候选图
							covercontent,//文章正文前40个字
							coverimages,//封面图片
							blockname: this.category,//分类名称
							tagnames: this.tags.join('|'),//标签
							isdraft: '1',//是否存草稿 0：直接发布，1：存草稿箱
							showlevel: this.permission.level,//权限
							levelcode: this.permission.code,//权限code
							istop: this.istop ? '1' : '0',//置顶
							seriesid: this.serisId == '-1' ? '' :this.serisId,//合集id
							formids
						})
						break;
				}
			},
			/**
			 * 处理待提交的数据
			 * @param {Object} v
			 */
			formatContent(v) {
				let covercontent = '';
				let subjectimages = '';
				let coverimages = '';
				let defaultimage = '';
				let subjectcontent = v.html;
				let index = v.text.length > 40 ? 40 : v.text.length;
				covercontent = v.text.substring(0,index);
				let images = [];
				let bigImagesList = [];
				let selectImages = [];
				v.images.forEach(item => {
					let temp = [imageStrigify(item.src),item.width,item.height].join(',');
					images.push(temp);
					//校验被选中图片是否被删除
					let flag = false;
					this.selectedImgs.forEach(v => {
						if(v.src == item.src) flag = true;
					})
					if(flag) selectImages.push(item)
				})
				//设置默认图片
				if(selectImages.length) {
					defaultimage = imageStrigify(selectImages[0].src);
				} else {
					v.images.forEach(item => {
						if(item.width >= 200 && item.height >= 200) {
							bigImagesList.push(item.src)
						}
					})
					if(bigImagesList.length) defaultimage = imageStrigify(bigImagesList[0]);
				}
				let formids = this.formids.join(",");
				
				subjectimages = images.join('|');
				coverimages = imageArrayToString(selectImages,['src','width','height']);
				coverimages = imageStrigify(coverimages);
				return {subjectcontent,covercontent,subjectimages,coverimages,defaultimage,formids}
			},
			/**
			 * 输入回调
			 * @param {Object} v
			 */
			input(v) {
				this.data = v;
				this.value = v.text;
				// this.images = v.images;
				// this.atUsers = v.users;
				// this.atFactory = v.factorys;
				// if(v.users) {
				// 	v.users.forEach(item => {
				// 		item.lock = true;
				// 	})
				// }
				// _data.localData('select-list-'+this.id,v.users);
			},
			/**
			 * 点击回调
			 */
			click() {
				this.emoji_active = -1;
				this.showFont = false; 
				this.showSet = false;
				this.showMore = false;
				this.keyboardVisible = true;
			},
			unfocus() {
				uni.hideKeyboard();
			},
			/**
			 * 监听艾特输入
			 */
			atInput() {
				uni.hideKeyboard();
				this.emoji_active = -1;
				this.showFont = false; 
				this.showSet = false;
				this.showMore = false;
				this.atCommonPop = true;
			},
			/**
			 * 点击表情图标
			 */
			emojiClick() {
				this.setContentHeight();
				let emoji_active = this.emoji_active == -1 ? 0 : -1;
				this.showFont = false;
				this.showSet = false;
				this.showMore = false;
				this.keyboardVisible = emoji_active == -1 ? true : false;
				if(!this.keyboardVisible) {
					setTimeout(() => {
						this.emoji_active = emoji_active
					},300)
					return
				}
				this.emoji_active = emoji_active
			},
			/**
			 * 点击字体图标
			 */
			fontClick() {
				this.setContentHeight();
				this.emoji_active = -1;
				this.showSet = false;
				this.showMore = false;
				this.showFont = !this.showFont;
				setTimeout(() => {
					uni.hideKeyboard();
				},100)
			},
			/**
			 * 点击更多按钮
			 */
			moreClick() {
				this.setContentHeight();
				this.emoji_active = -1;
				this.showSet = false;
				this.showFont = false;
				let showMore = !this.showMore;
				this.keyboardVisible = showMore ? false : true;
				if(!this.keyboardVisible) {
					setTimeout(() => {
						this.showMore = showMore;
					},300)
					return
				}
				this.showMore = showMore;
			},
			selectColor(v) {
				this.currentColor = v;
				this.showFont = false;
				this.setContentHeight();
			},
			/**
			 * 点击视频图标
			 */
			videoClick() {
				this.emoji_active = -1;
				this.showSet = false;
				this.showFont = false;
				this.showMore = false;
				this.videoVisible = true;
			},
			/**
			 * 隐藏视频弹窗
			 */
			hideVideoPop() {
				this.videoVisible = false;
			},
			/**
			 * 获取视频封面
			 */
			confirmVideo() {
				let that = this;
				that.videoImg = ''
				uni.request({
					url: 'https://api.bilibili.com/x/web-interface/view',
					method: 'GET',
					dataType: 'json',
					header: {
						'Cache-Control': 'no-cache',
						'content-type': 'application/json'
					},
					data: {
						bvid: this.videoSrc
					},
					success(res) {
						if(res.data.code != 0) {
							uni.showToast({
								title: 'BV号不正确',
								icon: 'none'
							})
							return
						}
						that.videoImg = res.data.data.pic;
					},
					fail() {
						uni.showToast({
							title: 'BV号请求错误',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 点击设置图标
			 */
			clickSetIcon() {
				this.setContentHeight();
				this.emoji_active = -1;
				this.showFont = false;
				this.showMore = false;
				let showSet = !this.showSet;
				this.keyboardVisible = showSet ? false : true;
				if(!this.keyboardVisible) {
					setTimeout(() => {
						this.showSet = showSet;
					},300)
					return
				}
				this.showSet = showSet;
			},
			clickAt() {
				this.emoji_active = -1;
				this.showFont = false;
				this.showSet = false;
				this.showMore = false;
				this.atPopVisible = true;
				this.setContentHeight();
			},
			selectAt(i) {
				this.atPopVisible = false;
				switch(i) {
					case 0://常用联系人
						this.atPopVisible = false;
						this.atCommonPop = true;
						break;
					case 1://艾特用户
						uni.navigateTo({
							url: '/pages/wait/add/select?name='+this.id
						})
						break;
					case 2:
						let factory = [];
						uni.navigateTo({
							url: '/pages/home/child/week-report-view/factory?factorys='+JSON.stringify(factory) + '&name=select-factory-' + this.id
						})
						break;
				}
			},
			/**
			 * 确认艾特常用人员
			 */
			confirmAt() {
				let users = [];
				this.atCommonUsers.forEach(item => {
					if(item.check) users.push({
						pname: item.AtUserName,
						pxid: item.AtUserPxid
					})
					item.check = false;
				})
				this.atUsers = users;
				setTimeout(() => {
					this.atUsers = [];
				},300)
				this.atCommonPop = false;
			},
			/**
			 * 点击图片图标
			 */
			imgClick() {
				this.emoji_active = -1;
				this.showFont = false;
				this.showSet = false;
				this.showMore = false;
				this.setContentHeight();
				let sourceType = is_iOS() ? ['album'] : ['album','camera'];
				uploadImages({
					sizeType: 'compressed',
					fileName: 'topic',
					sourceType
				}, res => {
					this.images = res;
				})
			},
			/**
			 * 切换emoji
			 * @param {Object} v
			 */
			changeEmoji(v) {
				this.emoji_active = v;
				this.setContentHeight();
			},
			/**
			 * 添加表情
			 */
			addEmoji(v) {
				if(is_iOS()) {
					this.emoji_active = -1;
				}
				this.emoji = v;
				setTimeout(() => {
					this.emoji = {};
				},100)
			},
			/**
			 * 添加金小鹏表情
			 */
			addJxp(v) {
				if(is_iOS()) {
					this.emoji_active = -1;
				}
				this.emoji_jxp = v;
				setTimeout(() => {
					this.emoji_jxp = {};
				},100)
			},
			/**
			 * 点击谁可以看列表
			 */
			choosePermission() {
				uni.navigateTo({
					url: './permission?data=' + JSON.stringify(this.permission),
					animationType: 'slide-in-bottom'
				})
			},
			/**
			 * 接收谁可以看参数
			 * @param {Object} v
			 */
			setPermission(v) {
				this.permission = v;
			},
			/**
			 * 接收分类和标签参数
			 * @param {Object} v
			 */
			setCategoryAndTags(v) {
				this.category = v.category;
				this.tags = v.tags;
			},
			/**
			 * 跳转选择标签、分类页面
			 */
			clickTagList() {
				uni.navigateTo({
					url: './category?category=' + this.category + '&tags=' + JSON.stringify(this.tags),
					animationType: 'slide-in-bottom',
				})
			},
			/**
			 * 点击合集
			 */
			clickGather() {
				this.getMySubjectSeriesList();
				this.gatherVisible = true;
			},
			/**
			 * 跳转到合集页
			 */
			addGather() {
				uni.navigateTo({
					url: './series-add'
				})
			},
			/**
			 * 跳转到搜索页面
			 */
			selectSubject() {
				this.showMore = false;
				uni.navigateTo({
					url: './search?type=edit'
				})
			},
			/**
			 * 选择表单
			 */
			selectForm() {
				let formids = this.formids.join(",");
				uni.navigateTo({
					url: '/pages/home/child/smart-form/select?formids=' + formids
				})
			},
			/**
			 * 获取表单数据
			 */
			getForm(v) {
				this.formids = v;
			},
			/**
			 * 获取帖子
			 * @param {Object} v
			 */
			getSubject(v) {
				this.$nextTick(() => {
					this.subject = {
						title: v.SubjectTitle,
						id: v.Id
					}
					setTimeout(() => {
						this.subject = {};
					},300)
				})
			},
			/**
			 * 跳转视频播放页
			 * @param {Object} v
			 */
			previewVideo(v) {
				uni.hideKeyboard()
				setTimeout(() => {
					uni.navigateTo({
						url: './video?bv=' + v
					})
				},300)
			},
			/**
			 * 跳转封面选择界面
			 * @param {Object} v
			 */
			selectImgs(v) {
				uni.hideKeyboard()
				setTimeout(() => {
					uni.navigateTo({
						url: './cover?data=' + JSON.stringify(v) + '&select=' + JSON.stringify(this.selectedImgs)
					})
				},300)
			},
			setImg(v) {
				this.selectedImgs = v;
			},
			/**
			 * 选中合集
			 * @param {Object} v
			 */
			selectSeries(v) {
				this.serisId = v;
				if(v == '-1') {
					this.selectedSeries = {};
				} else {
					this.subjectSeries.forEach(item => {
						if(item.Id == v) {
							this.selectedSeries = item
						}
					})
				}
				this.gatherVisible = false;
			},
			/**
			 * 标题聚焦
			 */
			titleFocus() {
				this.emoji_active = -1;
				this.showFont = false;
				this.showSet = false;
				this.showMore = false;
				this.titleInputFocus = true;
			},
			/**
			 * 跳转到草稿箱页面
			 */
			goDraftPage() {
				uni.navigateTo({
					url: './draft'
				})
			},
			/**
			 * 添加链接
			 */
			confirmUrl() {
				if(!this.urlSrc) {
					uni.showToast({
						title: 'URL不能为空',
						icon: 'none'
					})
					return
				}
				if(!this.isUrl(this.urlSrc)) {
					uni.showToast({
						title: '请输入正确的网址哦',
						icon: 'none'
					})
					return
				}
				this.link = {
					url: this.urlSrc,
					text: this.urlText
				}
				setTimeout(() => {
					this.link = {
						url: '',
						text: ''
					}
				},300)
				this.morePopVisible = false;
				this.showMore = false;
				this.setContentHeight();
				this.urlText = '';
				this.urlSrc = '';
			},
			isUrl(url) {
			   return /^(http(s)?:\/\/)/.test(url)
			},
			/**
			 * 接收草稿页参数
			 * @param {Object} v
			 */
			selectDraft(v) {
				this.content = '';
				this.type = 'edit-as-draft';
				this.subjectid = v.Id;
				this.getSubjectInfoById();
			},
			//替换表情符号为图片
			replaceEmoji(str) {
				// let result = str.match(/<span>\[.*?\]<\/span>/g);
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					for (let i = 0; i < this.emojiList.length; i++) {
						let row = this.emojiList[i];
						for (let j = 0; j < row.length; j++) {
							let EM = row[j];
							if (EM.alt == item) {
								let imgstr = '';
								// #ifdef H5
								imgstr = '<img class="default pic emoji" data-alt="'+EM.alt+'" style="width:22px;height:22px;" src="' + _data.data('static_url') + '/static/emoji/' + EM.url + '">';
								
								// #endif
								// #ifdef APP-PLUS
								let url = plus.io.convertLocalFileSystemURL('_www/static/img/emoji/' + EM.url);
								imgstr = '<img class="default pic emoji" data-alt="'+EM.alt+'" style="width:22px;height:22px;" src="' + url + '">';
								// #endif
								return imgstr;
							}
						}
					}
					for (let i = 0; i < this.jxpList.length; i++) {
						let row = this.jxpList[i];
						for (let j = 0; j < row.length; j++) {
							let EM = row[j];
							if (EM.alt == item) {
								let imgstr = '';
								// #ifdef H5
								imgstr = '<img  class="jxp pic emoji" data-alt="'+EM.alt+'" style="width:100px;height:100px;" src="' + _data.data('static_url') + '/static/emoji/jxp/' + EM.url + '.gif">';
								// #endif
								// #ifdef APP-PLUS
								let url = plus.io.convertLocalFileSystemURL('_www/static/img/jxp/gif/' + EM.url + '.gif');
								imgstr = '<img  class="jxp pic emoji" data-alt="'+EM.alt+'" style="width:100px;height:100px;" src="' + url + '">';
								// #endif
								return imgstr;
							}
						}
					}
				});
				replacedStr = replacedStr.replace(/(\r\n)|(\n)/g, '<br/>');
				return replacedStr;
			},
		}
	}
</script>

<script module="community" lang="renderjs">
	import {
		is_iOS,utf16toEntities,imageStrigify,formatImg
	} from '@/common/custom_util.js';
	import _data from '@/common/_data.js';
	const Diff= require('diff');
	
	function nodeToString(node) {
		var tmpNode = document.createElement('div')
		tmpNode.appendChild(node.cloneNode(true))
		var str = tmpNode.innerHTML
		tmpNode = node = null
		return str
	}
	
	function replaceNode(node,newNode) {
		if(node.firstChild !== null) {
			var children = node.childNodes;
		    for (var i = 0; i < children.length; i++) {
				if(children[i] == node) {
					node.replaceChild(newNode,children[i])
					continue
				}
				if(children[i].firstChild !== null) {
					replaceNode(children[i],newNode)
				}
		    }
		} else {
			node.parentNode.replaceChild(newNode,node)
		}
	}
	
	//判断是否支持range
	function isSupportRange() {
	  return typeof window.getSelection === 'function'
	}
	
	export default {
		data() {
			return {
				id: '',
				color: '#1E1E1E',
				box: null,
				static_img: '',
				bv: '',
				lastText: '',//最近一次的值
				selection: null,//selection对象
				lastEditRange: null,//定义最后光标对象
			}
		},
		mounted() {
			this.box = document.getElementById(this.id);
			if(this.box) this.box.focus();
			this.saveRange();
		},
		methods: {
			// 获取光标位置
			saveRange() {
				try {
					if(!isSupportRange()) return
					// 获取选定对象
					if(!this.selection) this.selection = window.getSelection()
					// 设置最后光标对象
					this.lastEditRange = this.selection.getRangeAt(0)//获取range对象，除了firefox其他都是0
				} catch(e) {}
			},
			// 设置光标位置
			setRange() {
				try {
					if(!isSupportRange()) return
					if(!this.lastEditRange) this.saveRange();
					// 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
					if(!this.selection) this.selection = window.getSelection()
					this.selection.removeAllRanges()
					this.selection.addRange(this.lastEditRange)
				} catch(e) {}
			},
			sendMethod(ownerInstance,name,value) {
				if(!this.box) this.box = document.getElementById(this.id)
				if(this.box) {
					if(value && value.text) {
						ownerInstance.callMethod(name, value);
						return
					}
					let text = this.box.innerHTML;
					text = utf16toEntities(text);
					const newObj = Object.assign({text}, value);
					ownerInstance.callMethod(name, newObj);
				}
			},
			beforeSubmit(ownerInstance,name) {
				if(!this.box) return
				let atEles = this.box.getElementsByClassName("at");
				let atFactoryEles = this.box.getElementsByClassName("at-factory");
				let imgEles = this.box.getElementsByClassName("edit-img");//上传的图片
				let box = document.getElementById(this.id).cloneNode(true);
				let emojiEles = box.getElementsByClassName("emoji");//emoji表情
				let imgElesCopy = box.getElementsByClassName("edit-img");//复制图片节点
				let users = [];
				let factorys = [];
				let images = [];
				let emojiStr = [];
				let imgBoxStr = [];
				let length = emojiEles.length;
				//替换表情为文字
				for (let i = 0; i < length; i++) {
					let item = emojiEles[0];
					let span = document.createElement('i');
					span.innerText = item.dataset.alt;
					replaceNode(item,span);
				}
				//去除src的值
				if(imgElesCopy && imgElesCopy.length) {
					for (let i = 0; i < imgElesCopy.length; i++) {
						imgElesCopy[i].src = '';
					}
				}
				
				let html = box.innerHTML.replace(/<i>|<\/i>/g,"");
				let text = box.innerText.replace(/\s/g,"");
				html = utf16toEntities(html);
				text = utf16toEntities(text);
				
				//处理艾特
				if(atEles && atEles.length) {
					for (let i = 0; i < atEles.length; i++) {
						let userStr = atEles[i].dataset.user;
						if(!userStr) continue
						let user = JSON.parse(userStr);
						let flag = false;
						for (let j = 0; j < users.length; j++) {
							if(users[j].pxid == user.pxid) flag = true;
						}
						if(flag) continue
						users.push(user);
					}
				}
				if(atFactoryEles && atFactoryEles.length) {
					for (let i = 0; i < atFactoryEles.length; i++) {
						let factoryStr = atFactoryEles[i].dataset.factory;
						if(!factoryStr) continue
						let factory = JSON.parse(factoryStr);
						let flag = false;
						for (let j = 0; j < factorys.length; j++) {
							if(factorys[j].OBSCODE == factory.OBSCODE) flag = true;
						}
						if(flag) continue
						factorys.push(factory);
					}
				}
				
				//获取上传图片地址
				if(imgEles && imgEles.length) {
					for (let i = 0; i < imgEles.length; i++) {
						images.push({
							src: imgEles[i].src,
							width: imgEles[i].dataset.width,
							height: imgEles[i].dataset.height,
						});
					}
				}
				this.sendMethod(ownerInstance,name,{html,text,users,images,factorys});
			},
			idChange(newVal, oldVal) {
				this.id = newVal;
			},
			contentChange(newVal, oldVal,ownerInstance) {
				if(!this.box) return
				this.box.innerHTML = newVal
				let imgEles = this.box.getElementsByClassName("edit-img");//上传的图片
				if(imgEles && imgEles.length) {
					for (let i = 0; i < imgEles.length; i++) {
						imgEles[i].src = formatImg(imgEles[i].dataset.key,false);
					}
				}
				this.sendMethod(ownerInstance,'input');
				// this.delImage();
			},
			custom_submit(event, ownerInstance) {
				this.beforeSubmit(ownerInstance,'submit')
			},
			custom_save(event, ownerInstance) {
				this.beforeSubmit(ownerInstance,'save')
			},
			custom_keydown(event, ownerInstance) {
				if(this.color) {
					document.execCommand('foreColor', false, this.color);
				}
			},
			custom_input(event, ownerInstance) {
				if(!this.box) return
				let text = this.box.innerText;
				const result = Diff.diffChars(this.lastText, text);
				let added = false;
				let res = {};
				for (let i = 0; i < result.length; i++) {
					if(result[i].added) {
						added = true;
						res = result[i];
					}
				} 
				let flag = false;
				if(added && res.value == '@') {
					this.sendMethod(ownerInstance,'atInput');
				}
				
				// if(this.lastText.length + 1 == text.length) {
				// 	let oldVal = this.lastText.split('');
				// 	let newVal = text.split('');
				// 	let flag = false
				// 	for (let i = 0; i < newVal.length; i++) {
				// 		if(i == newVal.length - 1 && newVal[i] == '@') {
				// 			flag = true;
				// 			break
				// 		}
				// 		if(oldVal[i] != newVal[i] && newVal[i] != '@') break
				// 		if(oldVal[i] != newVal[i] && newVal[i] == '@') {
				// 			flag = true;
				// 			break
				// 		}
				// 	}
				// 	if(flag) this.sendMethod(ownerInstance,'atInput');
				// }
				this.lastText = text;
				this.sendMethod(ownerInstance,'input');
			},
			custom_click(event, ownerInstance) {
				ownerInstance.callMethod('click');
				if(this.box) this.box.focus();
			},
			custom_blur() {
				this.saveRange()
			},
			colorChange(newVal, oldVal) {
				if(newVal == oldVal) return
				this.color = newVal;
				if(this.box) this.box.focus();
				this.setRange();
			},
			imagesChange(newVal, oldVal,ownerInstance) {
				if(!this.box) return
				newVal.forEach(item => {
					let w = '';
					let h = '';
					if(this.box.clientWidth < item.width) {
						w = this.box.clientWidth;
						h = item.height / item.width * this.box.clientWidth;
					} else {
						w = item.width;
						h = item.height;
					}
					let src = item.img;
					let key = imageStrigify(item.img);
					let imgHtml = "<span></span></br><div class='img-box' contenteditable='true'><img class='edit-img' src='"+src+"' data-key='"+ key +"' data-width='"+ item.width +"' data-height='"+ item.height +"' width = "+ w +" height = "+ h +"></div></br><span></span>";
					this.setRange();
					document.execCommand('insertHTML', false, imgHtml);
				})
				this.sendMethod(ownerInstance,'input')
			},
			custom_keyboardVisible(newVal, oldVal,ownerInstance) {
				if(newVal) {
					if(this.box) this.box.focus();
				} else {
					if(!is_iOS()) ownerInstance.callMethod('unfocus');
				}
			},
			static_imgChange(newVal, oldVal) {
				this.static_img = newVal;
			},
			custom_emoji(newVal, oldVal,ownerInstance) {
				let emoji = newVal;
				if(Object.keys(emoji).length) {
					let url = '';
					// #ifdef APP-PLUS
					url = plus.io.convertLocalFileSystemURL('_www/static/img/emoji/' + emoji.url);
					// #endif
					// #ifdef H5
					url = '/static/img/emoji/' + emoji.url;
					// #endif
					//ios执行后会弹出键盘，Android不会
					this.setRange();
					document.execCommand('insertHTML', false, '<img class="default pic emoji" src="' + url + '" data-alt="'+ emoji.alt +'" />');
					this.sendMethod(ownerInstance,'input');
				}
			},
			custom_jxp(newVal, oldVal,ownerInstance) {
				let jxp = newVal;
				if(Object.keys(jxp).length) {
					let url = '';
					// #ifdef APP-PLUS
					url = plus.io.convertLocalFileSystemURL('_www/static/img/jxp/gif/' + jxp.url + '.gif');
					// #endif
					// #ifdef H5
					url = '/static/img/jxp/gif/' + jxp.url + '.gif';
					// #endif
					this.setRange();
					document.execCommand('insertHTML', false, '<img class="jxp pic emoji" src="' + url + '" data-alt="'+ jxp.alt +'" width = "100" height = "100" />');
					this.sendMethod(ownerInstance,'input');
				}
			},
			atUsersChange(newVal, oldVal,ownerInstance) {
				if(!this.box || !newVal.length) return
				
				let html = '';
				let timestamp = new Date().getTime();
				newVal.forEach((item,index) => {
					let name = item.pname;
					let text = '@' + name;
					let user = JSON.stringify({
						pname: item.pname,
						pxid: item.pxid
					});
					let id = "" + timestamp + index;
					if(is_iOS()) {
						html += "<span name='at' id=" + id + " style='-webkit-user-select: auto;user-select: auto;'><span class='at' data-user='" + user + "' contenteditable='false' style='color: #5797cc;margin-right: 10px;-webkit-user-select: all;user-select: all;'>"+ text +"</span></span>";
					} else {
						html += "<span name='at' id=" + id + " class='at' data-user='" + user + "' contenteditable='true' style='color: #5797cc;margin-right: 10px;'>"+ text +"</span>";
					}
				})
				this.setRange();
				// 创建一个元素
			    const span = document.createElement('span');
			    span.innerHTML = html;
				this.lastEditRange.insertNode(span); 
				if (/@<span><span name="at"/.test(this.box.innerHTML)) {
				    this.box.innerHTML = this.box.innerHTML.replace(/@<span><span name="at"/, '<span><span name="at"');
				}
				let id = "" + timestamp + (newVal.length-1);
				let currentAtNode = document.getElementById(id);
				let targetNode = currentAtNode.parentNode;
				let index = 0;
				for(let i=0;i<targetNode.children.length;i++) {
					if(targetNode.children[i] === currentAtNode) index = i;
				}
				this.lastEditRange.setStart(targetNode, index+1);
				this.lastEditRange.collapse(true);
				this.selection.removeAllRanges();
				this.selection.addRange(this.lastEditRange);
				this.lastText = this.box.innerText;
				this.sendMethod(ownerInstance,'input');
			},
			atFactoryChange(newVal, oldVal,ownerInstance) {
				let factorys = [];
				if(newVal) {
					for (let i = 0; i < newVal.length; i++) {
						let flag = false;
						if(oldVal) {
							for (let j = 0; j < oldVal.length; j++) {
								if(newVal[i].OBSCODE == oldVal[j].OBSCODE) flag = true;
							}
						}
						if(!flag) factorys.push(newVal[i]);
					}
				}
				let html = '';
				factorys.forEach(item => {
					let name = item.name;
					let text = '@' + name;
					let factory = JSON.stringify({
						OBSCODE: item.OBSCODE
					});
					if(is_iOS()) {
						html += "<span style='-webkit-user-select: auto;user-select: auto;'><span class='at-factory' data-factory='" + factory + "' contenteditable='false' style='color: #5797cc;margin-right: 10px;-webkit-user-select: all;user-select: all;'>"+ text +"</span></span>";
					} else {
						html += "<span class='at-factory' data-factory='" + factory + "' contenteditable='false' style='color: #5797cc;margin-right: 10px;'>"+ text +"</span>";
					}
				})
				// if(this.box) this.box.focus();
				this.setRange();
				if(html) document.execCommand('insertHTML', false, html);
			},
			videoSrcChange(newVal, oldVal,ownerInstance) {
				this.bv = newVal;
			},
			linkChange(newVal, oldVal,ownerInstance) {
				if(!newVal.url) return
				let text = newVal.text ? newVal.text : newVal.url;
				let html = '';
				let emoji = utf16toEntities('&#128279;');
				if(is_iOS()) {
					html += "<span style='-webkit-user-select: auto;user-select: auto;'><span class='url' data-url='" + newVal.url + "' contenteditable='false' style='color: #4096ff;margin-right: 10px;-webkit-user-select: all;user-select: all;'>"+ text +"</span></span>";
				} else {
					html += "<span class='url' contenteditable='false' style='color: #4096ff;margin-right: 10px;' data-url='"+newVal.url+"'>"+ text +"</span>";
				}
				this.setRange();
				if(html) document.execCommand('insertHTML', false, html);
			},
			subjectChange(newVal, oldVal,ownerInstance) {
				if(!newVal.id) return
				let text = newVal.title;
				let html = '';
				let emoji = utf16toEntities('&#128214;');
				if(is_iOS()) {
					html += "<span style='-webkit-user-select: auto;user-select: auto;'><span class='subject' data-id='" + newVal.id + "' contenteditable='false' style='color: #4096ff;margin-right: 10px;-webkit-user-select: all;user-select: all;'>"+ emoji + text +"</span></span>";
				} else {
					html += "<span class='subject' contenteditable='false' style='color: #4096ff;margin-right: 10px;' data-id='"+ newVal.id +"'>"+ emoji + text +"</span>";
				}
				this.setRange();
				if(html) document.execCommand('insertHTML', false, html);
			},
			/**
			 * 添加视频
			 */
			videoImgChange(newVal, oldVal,ownerInstance) {
				if(!newVal) return
				let url = plus.io.convertLocalFileSystemURL('_www/static/theme/default/community/play.png');
				let html = '<div class="video-box img-box" style="position: relative;"><img class="video-img edit-img" data-bv="'+this.bv+'" src="'+newVal+'"/></div>';
				if(this.box) this.box.focus();
				document.execCommand('insertHTML', false, html);
				ownerInstance.callMethod('hideVideoPop');
				
				// let videoImgEles = document.getElementsByClassName('video-img') || [];
				// for (let i = 0; i < videoImgEles.length; i++) {
				// 	let item = videoImgEles[i];
				// 	let bv = item.dataset.bv;
				// 	item.addEventListener('click',() => {
				// 		ownerInstance.callMethod('previewVideo',bv)
				// 	})
				// }
			},
			/**
			 * 获取封面
			 */
			getImgs(event, ownerInstance) {
				let imgEles = document.getElementsByClassName("edit-img");
				let imgs = [];
				for (let i = 0; i < imgEles.length; i++) {
					let item = imgEles[i]
					if(item.width < 200 || item.height < 200) continue
					imgs.push({
						src: formatImg(item.dataset.key,false),
						width: item.dataset.width,
						height: item.dataset.height,
					});
				}
				ownerInstance.callMethod('selectImgs',imgs);
			},
			delImage() {
				let close = '';
				// #ifdef APP-PLUS
				close = plus.io.convertLocalFileSystemURL('_www/static/theme/default/home/sc.png');
				// #endif
				// #ifdef H5
				close = '/static/theme/default/home/sc.png';
				// #endif
				let imgEles = document.getElementsByClassName("close");
				for (let i = 0; i < imgEles.length; i++) {
					let item = imgEles[i];
					let img = item.getElementsByTagName('img')[0];
					img.src = close;
					item.addEventListener('click',() => {
						item.parentNode.parentNode.removeChild(item.parentNode);
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.edit {
		background-color: #fff;
		height: 100vh;
		position: relative;
		overflow: hidden;
		
		&__title {
			height: 50px;
			padding: 0 20rpx;
			box-sizing: border-box;
			position: fixed;
			top: 44px;
			/* #ifdef APP-PLUS */
			top: calc(44px + var(--status-bar-height));
			/* #endif */
			left: 0;
			right: 0;
			z-index: 9;
			background-color: #fff;
			
			&--input {
				height: 100%;
				padding: 20rpx 0;
				box-sizing: border-box;
				border-bottom: 1rpx solid #eee;
			}
		}
		
		&__content {
			padding: 5px 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			position: fixed;
			top: 99px;
			/* #ifdef APP-PLUS */
			top: calc(44px + var(--status-bar-height) + 50px + 5px); 
			/* #endif */
			left: 0;
			right: 0;
			z-index: 9;
			
			&--input {
				width: 100%;
				height: 100%;
				font-size: 18px;
				outline: none;
				-webkit-user-select: text;
				position: relative;
				overflow-y: scroll;
				overflow-x: hidden;
				background-color: #fafafa;
				transition: height .3s ease-out;
			}
		}
		
		&__tag {
			position: relative;
			width: 100%;
			border-top: 1rpx solid #eee;
			height: 50px;
			box-sizing: border-box;
			
			&-scroll {
				width: calc(100% - 60rpx);
				height: 100%;
				background-color: #fff;
				padding-left: 20rpx;
				box-sizing: border-box;
				white-space: nowrap;
				display: flex;
				flex-direction: row;
				align-items: center;
				
				&--item {
					display: inline-block;
					padding: 4rpx 10rpx;
					background-color: #F0F1F5;
					border-radius: 5rpx;
					margin-right: 20rpx;
					height: 60rpx;
					box-sizing: border-box;
					margin-top: 20rpx;
					color: #aaa;
				}
			}
			
			&--icon {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 999;
				height: 100%;
				width: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
			}
		}
		
		&__set {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-top: 1rpx solid #eee;
			padding: 0 10px;
			height: 50px;
			box-sizing: border-box;
			background-color: #fff;
			
			&--left {
				display: flex;
				flex-direction: row;
		
				&-item {
					width: 26px;
					height: 25px; 
					margin: 14px 10px;
		
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		
			&--right {
				width: 100rpx;
				border-left: 3rpx solid #aaa;
				
				&-box {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					
					image {
						width: 25px;
						height: 25px;
					}
				}
			}
		}
	}
	
	.category {
		background-color: #EAF7FF;
		color: #249AF2;
	}
	
	.title-input-focus {
		border-bottom: 1rpx solid #1890ff;
	}
	
	.show-placeholder::before {
		content: attr(placeholder);
		position: absolute;
		top: 2px;
		left: 2px;
		z-index: 999;
		color: #aaa;
		pointer-events: none;
		font-size: 16px;
	}
	
	.container {
		position: fixed; 
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;
		transition: all .3s;
	}
	
	.emoji__head {
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fafafa;
		padding: 0 20rpx;
		box-sizing: border-box;
	
		&--item {
			width: 80rpx;
			height: 80rpx;
			margin-right: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
	
			image {
				width: 60%;
				height: 60%;
			}
		}
	}
	
	.emoji-active {
		background-color: #f5f5f5;
	}
	
	.emoji-swiper {
		height: 40vw;
		background-color: #fafafa;
	
		swiper-item {
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;
	
			view {
				width: 12vw;
				height: 12vw;
				display: flex;
				justify-content: center;
				align-items: center;
	
				image {
					width: 22px !important; //8.4vw;
					height: 22px !important; //8.4vw;
				}
			}
		}
	}
	
	.jxp-swiper {
		height: 55vw;
		background-color: #fafafa;
	
		swiper-item {
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;
		}
	}
	
	.jxp-swiper__item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 1vw;
		
		image {
			width: 18vw;
			height: 18vw;
		}
		
		text {
			font-size: 25rpx;
			overflow: hidden;
		}
	}
	
	.font {
		height: 40vw;
		background-color: #fafafa;
	
		&__title {
			height: 80rpx;
			padding-left: 20rpx;
			font-size: 25rpx;
			color: #aaa;
			line-height: 80rpx;
		}
	
		&__list {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
	
			&--item {
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				padding: 10rpx;
				background-clip: content-box;
				border-width: 1rpx;
				border-style: solid;
				border-color: transparent;
				text-align: center;
				line-height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	.set {
		
		&__list {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-bottom: 1rpx solid #eee;
		}
	}
	
	.navbar {
		display: flex;
		align-items: center;
		
		&__text {
			font-size: 27rpx;
			color: #aaa;
			margin-right: 20rpx;
		}
		
		&__btn {
			font-size: 25rpx;
			color: #aaa;
			width: 100rpx;
			padding: 5rpx 10rpx;
			border: 1rpx solid #d9d9d9;
			text-align: center;
			border-radius: 10rpx;
		}
	}
	
	.gather {
		
		&__head {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			height: 100rpx;
			align-items: center;
			
			&--left {
				font-size: 34rpx;
				font-weight: bold;
			}
			
			&--right {
				font-size: 28rpx;
				color: #91d5ff;
			}
		}
		
		&__unselect {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			height: 100rpx;
			align-items: center;
			
			&--left {
				font-size: 28rpx;
			}
		}
		
		&-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			
			&__left {
				display: flex;
				align-items: center;
				
				&--img {
					width: 80rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #e6f7ff;
					border-radius: 10rpx;
					
					image {
						width: 80%;
						height: 80%;
					}
				}
				
				&--title {
					width: 300rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 25rpx;
					line-height: 100rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
			}
			
		}
	}
	
	.video {
		
		&__head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			
			&--center {
				font-size: 34rpx;
				font-weight: bold;
			}
			
			&--right {
				font-size: 25rpx;
				color: #1890ff;
			}
		}
		
		&__body {
			padding: 60rpx 40rpx;
			box-sizing: border-box;
			
			input {
				height: 80rpx;
				background-color: #eee;
				border-radius: 10rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
		}
	}
	
	.more {
		height: 300rpx;
		display: flex;
		padding: 20rpx 0;
		padding-right: 20rpx;
		box-sizing: border-box;
		background-color: #eee;
		
		&-list {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-left: 20rpx;
			
			&__icon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				
				image {
					width: 50%;
					height: 50%;
				}
			}
			
			&__text {
				font-size: 30rpx;
				color: #aaa;
				margin-top: 10rpx;
			}
		}
	}
	
	.more-pop {
		
		&__head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			
			&--center {
				font-size: 30rpx;
			}
			
			&--right {
				font-size: 30rpx;
				color: #1890ff;
			}
		}
		
		&__body {
			padding: 40rpx;
			
			&--input {
				background-color: #eee;
			}
		}
	}
	
	.at-common-pop {
		height: 80vh;
		position: relative;
		
		&__head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			height: 100rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;
			
			&--right {
				
				&-btn {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 26rpx;
					background-color: #1890ff;
					border-radius: 10rpx;
					padding: 5rpx 20rpx;
					color: #fff;
				}
			}
		}
		
		&__bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 9;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #f0f0f0;
		}
	}
	
	.at-list {
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		
		&__checkbox {
			width: 80rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		&__avator {
			width: 60rpx;
			height: 60rpx;
			margin: 0 10rpx;
			margin-right: 30rpx;
		}
	}
	
	.at-list /deep/ .uni-checkbox-input {
		border-radius: 50%;
	}
	
	.at-pop {
		height: 140rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		
		&__btn {
			width: 200rpx;
			height: 70rpx;
			background-color: #1890ff;
			color: #fff;
			text-align: center;
			line-height: 70rpx;
			border-radius: 10rpx;
		}
	}
	
	.navbar__btn--active {
		background-color: #1890ff;
		color: #fff;
	}
	
	.navbar__btn--active-save {
		background-color: #ffa940;
		color: #fff;
	}
	
	.edit__content--input /deep/ #img {
		max-width: 100%;
	}
	
	.edit__content--input /deep/ .video-img {
		width: 100%;
		height: 400rpx;
	}
	
	.edit__content--input::-webkit-scrollbar {/*滚动条整体样式*/
		display: block !important;
	    width: 3px !important;     /*高宽分别对应横竖滚动条的尺寸*/
	    height: 0.5px !important;
	}
	
	.edit__content--input::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
	    border-radius: 10px;
	    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	    background: #aaa;
	}
	
	.edit__content--input::-webkit-scrollbar-track {/*滚动条里面轨道*/
	    border-radius: 10px;
	    background: #fff;
	}
	
	.edit__content--input /deep/ .edit-img {
		border-radius: 20rpx;
		// max-width: 99% !important;
	}
	
	.edit__content--input /deep/ .img-box {
		position: relative;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		// border-radius: 20rpx;
		// border: 5rpx dashed #69c0ff;
		// margin-bottom: 20rpx;
		// padding: 5rpx 0;
	}
	
	.edit__content--input /deep/ .close {
		display: block !important;
		position: absolute;
		top: 0;
		right: 0;
		content: '';
		font-size: 25rpx;
		color: #fff;
		background-color: #fff;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		
		img {
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.edit__content--input /deep/ .url {
		color: #249AF2;
	}
</style>
